<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#first_category").change(function(){
		
		$.ajax({
			type:"POST",
			url:"selectSecondCategoryByFId.do",
			data:"firstCategoryId="+$("#first_category").val(),
			dataType:"JSON",
			beforeSend:function(){				
				if($("#first_category").val()=="DEFAULT"){
					//empty.append 를 하면 html 처럼 되는거같다!
					$("#second_category").empty().append("<option value='DEFAULT'>중분류</option>");
					$("#third_category").empty().append("<option value='DEFAULT'>소분류</option>");
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//소분류 항목 삭제
				$("#third_category").empty().append("<option value='DEFAULT'>소분류</option>");
				//테이블 삭제
				$("#thead").empty();
				$("#tbody").empty();
				
				//중분류 추가
				var str = "<option value='DEFAULT'>중분류</option>";
				for(var i = 0; i<jsonData.length;i++){
					str = str+"<option value='"+jsonData[i].SECOND_CATEGORY_ID+"'>"+ jsonData[i].SECOND_CATEGORY_NAME+"</option>";
				}
				$("#second_category").empty().append(str);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});
	
	
	
	$("#second_category").change( function(){
		$.ajax({
			type:"POST",
			url:"selectThirdCategoryBySId.do",
			data:"secondCategoryId="+$("#second_category").val(),
			dataType:"JSON",
			beforeSend:function(){
				if($("#second_category").val()=="DEFAULT"){
					alert("중분류 선택하세요");
					$("#third_category").empty().append("<option value='DEFAULT'>소분류</option>");
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//테이블 삭제
				$("#thead").empty();
				$("#tbody").empty();
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//추가
				var str = "<option value='DEFAULT'>소분류</option>";
				
				for(var i=0;i<jsonData.length;i++){
					str = str +"<option value='"+jsonData[i].THIRD_CATEGORY_ID+"'>"
					+jsonData[i].THIRD_CATEGORY_NAME+"</option>";
				}
				$("#third_category").html(str);
				//or
				//$("#third_category").empty().append(str);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});

	//세번째 카테고리가 변경되면 상품리스트가 출력됨
	$("#third_category").change(function(){
		//alert($("#third_category").val());
		$.ajax({
			type:"POST",
			url:"selectProductInfoByTId.do",
			data:"thirdCategoryId="+$("#third_category").val(),
			dataType:"JSON",
			beforeSend:function(){
				if($("#third_category").val()=="DEFAULT"){
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//thead 처리
				var head="<tr><td>제품ID</td><td>제품명</td><td>제조사</td><td>제품가격</td></tr>";
				$("#thead").empty().append(head);
				//tbody 처리
				var row="";
				$.each(jsonData,function(index,prod){
					row+="<tr>";
					row+="<td>"+prod.productId+"</td>";
					row+="<td>"+prod.productName+"</td>";
					row+="<td>"+prod.productMaker+"</td>";
					row+="<td>"+prod.productPrice+"</td>";
					row+="</tr>";
				});
				$("#tbody").empty().append(row);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});//소분류 select 처리 종료
	//상품 정보 테이블의 특정 row를 선택하면 그 상품의 정보를 product_info_layer 에 출력
	$("#product_info_layer").hide();//loading시에는 안보이도록 처리
	$("#tbody").on("click", "tr", function(){//tr에 event 처리
		//선택 tr 배경색 처리
		$("#tbody tr").css("background-color", "white");
		$(this).css("background-color", "lightgray");
		//서버로 요청
		$.ajax({
			type:"POST",
			url:"selectProductById.do",
			dataType:"JSON",
			data:"productId="+$(this).find(":eq(0)").text(),//부모로부터 자식요소 0번째를 선택하는 선택자
			success:function(jsonData){
				$("#product_info_layer").text(jsonData.info);
				$("#product_info_layer").show(0);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});
});


</script>
<style type="text/css">
table, th, td{
	border-collapse: collapse;
	border: 1px solid black;
	
}
table{
width:700px;
}
select{
	width:150px;
}
#product_info_layer{
	width:700px;
	border: 1px solid gray;
	border-collapse: collapse;
}
#tbody{
	cursor: pointer;
}
</style>
</head>




<body>
대분류 : 
<select name="first_category" id="first_category" >
<OPTION VALUE='DEFAULT'>대분류</OPTION>
<c:forEach var="fc" items="${requestScope.firstCategory}">
	<option value="${ fc.FIRST_CATEGORY_ID}">
		${fc.FIRST_CATEGORY_NAME}
	</option>
</c:forEach>
</select>
중분류 : 
<SELECT id="second_category">
	<OPTION VALUE='DEFAULT'>중분류</OPTION>
</SELECT>
소분류 : 
<SELECT id="third_category">
	<OPTION VALUE='DEFAULT'>소분류</OPTION>
</SELECT>
<p> 
<table>
	<thead id="thead"></thead>
	<tbody id="tbody"></tbody>
</table>
<p>
<!-- 상품 상세 정보 출력할 div-->

<div id="product_info_layer"></div>
</body>
</html>










